<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <link rel="stylesheet" href="../../css/bootstrap.min.css">
    <link rel="stylesheet" href="../../css/com.css">
    <link rel="stylesheet" href="../../css/jquery.mCustomScrollbar.css">
    <title>视频播放</title>
    <style type="text/css">
        .list-group .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
            background-color: #ffd76d;
            /* 1st scrollbar dragger style... */
        }
        .list-group .mCSB_scrollTools .mCSB_draggerRail {
            width: 4px;
            background-color: #4fc177;
        }
        #mCSB_1 {
            background-color: #fff;
        }
        #mCSB_1_container {
            background-color: #fff;
        }
        .mCSB_inside > .mCSB_container {
           margin-right: 0;
        }
    </style>
</head>
<body>
<div class="my-head">
    <div class="container">
        <div class="col-sm-4">
            <img  class="index-log" src="../../images/index-logo.png">
        </div>
        <div class="col-sm-4 col-sm-push-4 index-hr">
            <div class="col-xs-6 col-xs-pull-1" >
                <form class="form-horizontal">
                    <div class="form-group index-hr-pd">
                        <div class="input-group ver-cen-pad" id="head-input-box">
                            <label for="index-search"class="sr-only">Search</label>
                            <input id="index-search" class="form-control" type="text">
                            <div class="input-group-btn index-search-icon"><button type="submit" class="btn" ><img class="search-btn" src="../../images/search-icon.png"></button></a></div>
                        </div>
                    </div>
                </form>
            </div>
            <div class="col-xs-6 index-hr-pd ab-l">
                <ul class="nav nav-tabs user-login-box">
                    <li role="presentation" class="dropdown">
                        <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
                            <img src="../../images/user-hd-img.png">
                            <span id="user-name">王晓华</span>
                            <span class="caret"></span></span>
                        </a>
                        <div class="dropdown-menu">
                            <a href="#" class="list-group-item user-center-page">个人主页</a>
                            <a href="#" class="list-group-item user-set">账号设置</a>
                            <a href="#" class="list-group-item user-qus">常见问题</a>
                            <a href="#" class="list-group-item user-login-out">退出</a>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>
<div class="source-play-main">
    <div class="container">
        <div class="row">
            <ol class="breadcrumb">
                <li><a href="#">设计与发现课程学习页面</a></li>
                <li class="active">课程播放</li>
            </ol>
        </div>
        <div class="row">
            <div class="col-md-7 source-box">
                <video id="myVideo" preload="" class="current-media" src="../../video/【MV港_www.mvgang.com】Rainbow%20-%20Whoo「MelOn.1080P」.mp4">
                </video>
                <div class="video-wrap">
                    <span class="v-cover-icon"></span>
                </div>
                <div class="video-control-wrap">
                    <div class="video-control-box clearfix">
                        <div class="btn-p-p"></div>
                        <div class="video-buffer-progress">
                        </div>
                        <div class="video-progress">
                            <div class="prog-bar">
                                <span class="prog-bar-point video-start-point"></span>
                            </div>
                            <div class="buffer-bar">

                            </div>
                        </div>
                        <div class="video-time-zone">
                            <div class="current-time"></div>
                            <div class="total-time"></div>
                        </div>
                        <div class="video-little-btn">
                            <div class="media-vol">
                                <div class="media-vol-control">
                                    <div class="cur-vol-point">
                                        <span class="cur-vol-percent">100%</span>
                                    </div>
                                    <div class="cur-vol">

                                    </div>
                                </div>
                            </div>
                            <div class="media-full">

                            </div>
                        </div>

                    </div>
                </div>
            </div>
            <div class="col-md-5">
               <div class="col-sm-12 source-de-tr">
                   <a class="label share-btn">分享</a>
                   <ul class="share-list">
                       <li class="o"><a href="#" style="display: inline-block;width: 100%;height: 100%" onclick="shareToQQ(event)"></a></li>
                       <li class="tw"><a href="#" class="jiathis_button_weixin" style="display: inline-block;width: 100%;height: 100%"></a></li>
                       <li class="th"><a href="#" class="jiathis_button_qzone" style="display: inline-block;width: 100%;height: 100%"></a></li>
                       <li class="fo"><a href="#" class="jiathis_button_tsina" style="display: inline-block;width: 100%;height: 100%"></a></li>
                       <li class="fi"><a href="#" class="jiathis_button_douban" style="display: inline-block;width: 100%;height: 100%"></a></li>
                   </ul>
                   <p><span>课程名称：设计与发现</span><br>讲师：Dwayne Davis<br>正在学习：2 课时 / 10 课时</p>
               </div>
                <div class="col-sm-12 source-flow-b">
                    <div class="source-flow-box">
                        <h4>课时列表</h4>
                        <ul class="list-group">
                            <li class="list-group-item"><a href="#">课时 1<br>矢量图标的绘制与图层样式的应用</a><span class="item-tz">14:50</span></li>
                            <li class="list-group-item source-flow-active"><a href="#">课时 1<br>矢量图标的绘制与图层样式的应用</a></a></li>
                            <li class="list-group-item"><a href="#">课时 1<br>矢量图标的绘制与图层样式的应用</a></a></li>

                            <li class="list-group-item"><a href="#">课时 1<br>矢量图标的绘制与图层样式的应用</a><span class="item-tz">14:50</span></li>
                            <li class="list-group-item source-flow-active"><a href="#">课时 1<br>矢量图标的绘制与图层样式的应用</a></a></li>
                            <li class="list-group-item"><a href="#">课时 1<br>矢量图标的绘制与图层样式的应用</a></a></li>
                            <li class="list-group-item"><a href="#">课时 1<br>矢量图标的绘制与图层样式的应用</a><span class="item-tz">14:50</span></li>
                            <li class="list-group-item source-flow-active"><a href="#">课时 1<br>矢量图标的绘制与图层样式的应用</a></a></li>
                            <li class="list-group-item"><a href="#">课时 1<br>矢量图标的绘制与图层样式的应用</a></a></li>

                        </ul>
                    </div>
                </div>
            </div>
        </div>

    </div>
    <div class="container">
        <div class="row media-tabs-box">
            <div class="col-md-12 add-pad">
                <ul class="nav nav-tabs nav-justified source-play-nav" role="tablist">
                    <li class="active" role="presentation"><a href="#question-key" aria-controls="question-key" role="tab" data-toggle="tab">疑问要点</a></li>
                    <li role="presentation"><a href="#source-key-hk" aria-controls="source-key-hk" role="tab" data-toggle="tab">课程要点与作业</a></li>
                    <li role="presentation"><a href="#data-dl" aria-controls="data-dl" role="tab" data-toggle="tab">资料下载 </a></li>
                </ul>
                <div class="tab-content">
                    <div  role="tabpanel" class="tab-pane fade  source-detail-p1 active in" id="question-key">
                        <div class="part-content">
                            <div class="col-sm-7">
                                <div class="media">
                                    <div class="media-left">
                                        <a href="#">
                                            <img class="media-object" src="../../images/teacher-head-img.png" />
                                        </a>
                                    </div>
                                    <div class="media-body">
                                        <a href="#" class="active" id="sk-p">问大家</a><!--<a href="#" id="sk-t">问老师</a>-->
                                        <form role="form">
                                            <div class="form-group">
                                                <textarea class="form-control" rows="4"></textarea>
                                                <button type="submit" class="btn">提问</button>
                                            </div>
                                        </form>
                                    </div>
                                </div>
                            </div>
                          <!--  <div class="col-sm-5 add-depart-line">
                                <div class="col-xs-11 col-xs-push-1 ques-hot">
                                    <p>常见问题</p>
                                    <ul class="list-inline ques-list">
                                        <li><a class=" list-group-item">怎么完美的抠图？</a></li>
                                        <li><a class="list-group-item">怎么抠图？</a></li>
                                        <li><a class="list-group-item">怎么熟练抠图？</a></li>
                                        <li><a class="list-group-item">如何提高审美？</a></li>
                                    </ul>
                                </div>
                            </div>-->
                        </div>
                        <div class="part-content part-ex part-more-pad" >
                            <div class="col-md-12 p1-snd">
                                <div class="media media-fir">
                                    <div class="media-left">
                                        <a class="media-object"><img src="../../images/user-hd-img.png"></a>
                                    </div>
                                    <div class="media-body">
                                        <span class="user-name">王小花</span>
                                        <span class="uq-tz">一小时前</span>
                                        <p class="q-d-box"><span class="same-q">同问</span><span class="same-q-count">21</span></p>
                                        <p class="q-d-box"><span class="discus">提问</span><span class="discus-count">3</span></p>

                                    </div>
                                </div>
                                <p class="user-q">设计流程是否一定要遵循所有步骤进行，还是能够根据实际情况跳过某些步骤？</p>
                                <div class="media media-snd">
                                    <div class="media-left">
                                        <a class="media-object"><img src="../../images/user-hd-img.png"></a>
                                    </div>
                                    <div class="media-body clearfix">
                                        <span class="user-name user-discus">王大花</span><span class="user-agree">赞同</span><span class="user-like">2</span><span class="discus-tz">30分钟前</span>
                                        <p class="discus-ans">一般情况按标准流程进行能确保更全面的思考，如果应用得熟练，可适当快速完成某些步骤。</p>
                                    </div>
                                </div>
                                <div class="media media-snd">
                                    <div class="media-left">
                                        <a class="media-object"><img src="../../images/user-hd-img.png"></a>
                                    </div>
                                    <div class="media-body">
                                        <span class="user-name user-discus">王大花</span><span class="user-agree">赞同</span><span class="user-like">2</span><span class="discus-tz">30分钟前</span>
                                        <p class="discus-ans">一般情况按标准流程进行能确保更全面的思考，如果应用得熟练，可适当快速完成某些步骤。</p>
                                    </div>
                                </div>
                                <div class="hid-ans">
                                    <div class="media media-snd">
                                        <div class="media-left">
                                            <a class="media-object"><img src="../../images/user-hd-img.png"></a>
                                        </div>
                                        <div class="media-body">
                                            <span class="user-name user-discus">王大花</span><span class="user-agree">赞同</span><span class="user-like">2</span><span class="discus-tz">30分钟前</span>
                                            <p class="discus-ans">一般情况按标准流程进行能确保更全面的思考，如果应用得熟练，可适当快速完成某些步骤。</p>
                                        </div>
                                    </div>
                                    <div class="media media-snd">
                                        <div class="media-left">
                                            <a class="media-object"><img src="../../images/user-hd-img.png"></a>
                                        </div>
                                        <div class="media-body">
                                            <span class="user-name user-discus">王大花</span><span class="discus-tz">30分钟前</span>
                                            <p class="discus-ans">一般情况按标准流程进行能确保更全面的思考，如果应用得熟练，可适当快速完成某些步骤。<span class="user-agree">赞同</span><span class="user-like">2</span></p>
                                        </div>
                                    </div>
                                </div>
                                <div class="view-all-box">
                                    <div class="hid-head">
                                        <a href="#" class="view-all-ans">展开全部</a><button class="btn ans-btn">回 答</button>
                                    </div>
                                    <form class="hid-form">
                                        <div class="form-group">
                                            <label for="user-q" class="sr-only"></label>
                                            <textarea class="form-control" rows="3" id="user-q"></textarea>
                                        </div>
                                        <div class="form-group text-right">
                                            <button type="button" class="btn cancel-ans">取 消</button>
                                            <button type="submit" class="btn submit-ans">确 定</button>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                        <div class="part-content part-ex part-more-mrg">
                            <div class="col-md-12 p1-snd">
                                <div class="media media-fir">
                                    <div class="media-left">
                                        <a class="media-object"><img src="../../images/user-hd-img.png"></a>
                                    </div>
                                    <div class="media-body">
                                        <span class="user-name">王小花</span>
                                        <p class="q-d-box active"><span class="same-q">同问</span><span class="same-q-count">21</span></p>
                                        <p class="q-d-box discus-none"><span class="discus">提问</span><span class="discus-count">0</span></p>
                                        <span class="uq-tz">一小时前</span>
                                    </div>
                                </div>
                                <p class="user-q">设计流程是否一定要遵循所有步骤进行，还是能够根据实际情况跳过某些步骤？</p>
                                <div class="media media-snd">
                                    <div class="media-left">
                                        <a class="media-object"><img src="../../images/user-hd-img.png"></a>
                                    </div>
                                    <div class="media-body">
                                        <span class="user-name user-discus">李老师</span>
                                        <span class="label label-danger teacher-label">教师解答</span>
                                        <span class="user-thanks">感谢</span>
                                        <span class="user-collect">3</span>
                                        <span class="discus-tz">30分钟前</span>
                                        <p class="discus-ans">一般情况按标准流程进行能确保更全面的思考，如果应用得熟练，可适当快速完成某些步骤。</p>
                                    </div>
                                </div>
                                <div class="view-all-box">
                                    <div class="hid-head">
                                        <a href="#" class="view-all-ans none-ans">展开全部</a><button class="btn ans-btn">回 答</button>
                                    </div>
                                    <form class="hid-form">
                                        <div class="form-group">
                                            <label for="user-q-l" class="sr-only"></label>
                                            <textarea class="form-control" rows="3" id="user-q-l"></textarea>
                                        </div>
                                        <div class="form-group text-right">
                                            <button type="button" class="btn cancel-ans">取 消</button>
                                            <button type="submit" class="btn submit-ans">确 定</button>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6 col-md-push-6 text-right">
                                <ul class="pagination my-pagination">
                                    <li class=""><span>上一页</span></li>
                                    <li class=""><span>1</span></li>
                                    <li><span>1</span></li>
                                    <li class="active"><span>1</span></li>
                                    <li><a href="http://bigschool.com/backend/course/index?page=2">2</a></li>
                                    <li class=""><span>1</span></li>
                                    <li><a href="http://bigschool.com/backend/course/index?page=2">2</a></li>
                                    <li><a href="http://bigschool.com/backend/course/index?page=2" rel="next">下一页</a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div role="tabpanel" class="tab-pane fade source-detail-p2 " id="source-key-hk">
                        <div class="col-sm-6 col-md-6 source-key-box">
                            <h4>课程要点</h4>
                            <div class="list-group">
                                <a class="list-group-item" href="">
                                    <span class="source-key">矢量图标的绘制与图层样式的应用</span><span class="source-tz">03:01 - 04:02</span>
                                    <span class="btn view-source-btn">重点回看</span>
                                </a>
                                <a class="list-group-item" href="#">
                                    <span class="source-key">矢量图标的绘制与图层样式的应用</span><span class="source-tz">03:01 - 04:02</span>
                                    <span class="btn view-source-btn">重点回看</span>
                                </a>
                                <a class="list-group-item" href="#">
                                    <span class="source-key">矢量图标的绘制与图层样式的应用</span><span class="source-tz">03:01 - 04:02</span>
                                    <span class="btn view-source-btn">重点回看</span>
                                </a>
                                <a class="list-group-item" href="#">
                                    <span class="source-key">矢量图标的绘制与图层样式的应用</span><span class="source-tz">03:01 - 04:02</span>
                                    <span class="btn view-source-btn">重点回看</span>
                                </a>
                                <a class="list-group-item" href="#">
                                    <span class="source-key">矢量图标的绘制与图层样式的应用</span><span class="source-tz">03:01 - 04:02</span>
                                    <span class="btn view-source-btn">重点回看</span>
                                </a>
                                <a class="list-group-item" href="#">
                                    <span class="source-key">矢量图标的绘制与图层样式的应用</span><span class="source-tz">03:01 - 04:02</span>
                                    <span class="btn view-source-btn">重点回看</span>
                                </a>
                                <a class="list-group-item" href="#">
                                    <span class="source-key">矢量图标的绘制与图层样式的应用</span><span class="source-tz">03:01 - 04:02</span>
                                    <span class="btn view-source-btn">重点回看</span>
                                </a>
                            </div>
                        </div>
                        <div class="col-sm-6 col-md-6 source-hk-box">
                            <div class="no-home-work">
                            </div>
                          <!--  <h4>作业练习</h4>
                            <ul class="list-group">-->

                                <!--
                                <li class="list-group-item"><span class="hk-content"><h5>作业1</h5>Acme Foodstuffs公司遇到了一个为产品选材的问题。Acme决定生产一款盛热玉米汁用的新勺子。生产过程中，必须在玉米汁温度较高时（80℃），用勺子将其盛放到大瓶子中，且每次要连续使用一个半小时以上。解决此问题的材料需要考虑哪些属性？</span></li>
                                <li class="list-group-item"><span class="hk-content"><h5>作业</h5>1Acme Foodstuffs公司遇到了一个为产品选材的问题。Acme决定生产一款盛热玉米汁用的新勺子。生产过程中，必须在玉米汁温度较高时（80℃），用勺子将其盛放到大瓶子中，且每次要连续使用一个半小时以上。解决此问题的材料需要考虑哪些属性？</span></li>-->
                 <!--           </ul>-->
                        </div>
                    </div>
                    <div role="tabpanel" class="tab-pane fade  source-detail-p3" id="data-dl">
                    <!--    <div class="col-md-3">
                            <p>课程使用卡通素材包</p><a href="#" class="btn source-dl">下载</a>
                        </div>
                        <div class="col-md-3">
                            <p>课程使用卡通素材包</p><a href="#" class="btn source-dl">下载</a>
                        </div>
                        <div class="col-md-3">
                            <p>课程使用卡通素材包</p><a href="#" class="btn source-dl">下载</a>
                        </div>
                        <div class="col-md-3 ">
                            <p>课程使用卡通素材包</p><a href="#" class="btn source-dl">下载</a>
                        </div>-->
                        <span class="no-source-detail">

                        </span>
                    </div>
                </div>
            </div>
        </div>

    </div>
</div>

<div class="footer">
    <div class="container">
        <div class="row">
            <div class="col-md-9">
                <h4 class="foot-title">联系方式</h4>
                <ul class="my-list foot-list">
                    <li>010-5653 8600</li>
                    <li>北京市朝阳区大屯东路名人公寓</li>
                    <li>media@zhigan-mail.com</li>
                </ul>
                <h5 class="foot-title-se">中国青少年科技辅导员协会 合作网站</h5>
                <p class="foot-clr">Copyright 2015 备案号 京备2016123445678899</p>
            </div>
            <div class="col-md-3">
                <div class="col-xs-10">
                    <img src="../../images/index-wc-icon.png">
                    <a class="back-top" href="#"></a>
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript" src="http://v3.jiathis.com/code/jia.js?uid=1" charset="utf-8"></script>
<script src="../../js/jquery.min.js"></script>
<script src="../../js/bootstrap.min.js"></script>
<script src="../../js/mediaControl.js"></script>
<script src="../../js/jquery.mCustomScrollbar.concat.min.js"></script>
<script type="text/javascript">
    //分享到豆瓣
     function shareToDouban(event){
            event.preventDefault();
            var _shareUrl = 'http://shuo.douban.com/!service/share?';
             _shareUrl += 'href=' + encodeURIComponent(location.href);    //分享的链接
            _shareUrl += '&name=' + encodeURIComponent(document.title);    //分享的标题
             window.open(_shareUrl,'_blank','width='+ 1000 +',height='+ 1000 +',toolbar=no,menubar=no,scrollbars=no,resizable=1,location=no,status=0');
         }
    // 分享到QQ
    function shareToQQ(event){
        event.preventDefault();
        var p = {
            url:location.href, /*获取URL，可加上来自分享到QQ标识，方便统计*/
            desc:'', /*分享理由(风格应模拟用户对话),支持多分享语随机展现（使用|分隔）*/
            title:'', /*分享标题(可选)*/
            summary:'', /*分享摘要(可选)*/
            pics:'', /*分享图片(可选)*/
            flash: '', /*视频地址(可选)*/
            site:'', /*分享来源(可选) 如：QQ分享*/
            style:'201',
            width:32,
            height:32
        };
        var s = [];
        for(var i in p){
            s.push(i + '=' + encodeURIComponent(p[i]||''));
        }
        s.join('&')
        var _shareUrl = 'http://connect.qq.com/widget/shareqq/index.html?';
        _shareUrl +=   s.join('&');
        console.log(_shareUrl);
        window.open(_shareUrl,'_blank');
    }
</script>
<script src="http://connect.qq.com/widget/loader/loader.js" widget="shareqq" charset="utf-8"></script>
<script>
    (function($){
        $(window).load(function(){
            $(".source-flow-box .list-group").mCustomScrollbar();
        });
    })(jQuery);
    $(function(){
         $(".source-detail-p1 .media-body a").click(function(){
             var evt = window.event || arguments.callee.caller.arguments[0];
             evt.preventDefault();
            $(this).addClass("active").siblings().removeClass("active");
         });
        $(".ques-list li").click(function(){
            var evt = window.event || arguments.callee.caller.arguments[0];
            evt.preventDefault();
            $(this).addClass("active").siblings().removeClass("active");
        });
        $(".user-agree").click(function(){
            $(this).toggleClass("like");
            if($(this).hasClass("like")) {
                $(this).next().text(parseInt($(this).next().text()) + 1);
            } else {
                $(this).next().text(parseInt($(this).next().text()) - 1);
            }
        });
        $(".user-thanks").click(function() {
            $(this).toggleClass("collect");
            if($(this).hasClass("collect")) {
                $(this).next().text(parseInt($(this).next().text()) + 1);

            } else {
                $(this).next().text(parseInt($(this).next().text()) - 1);
            }
        });
        $(".q-d-box").click(function(){
            $(this).toggleClass("active");
            $that = $(this).find(".same-q-count");
            if($(this).hasClass("active")) {
                $that.text(parseInt($that.text()) + 1);
            } else {
                $that.text(parseInt($that.text()) - 1);
            }
        });
        $(".source-key-box .list-group-item").hover(function(){
            var evt = window.event || arguments.callee.caller.arguments[0];
            evt.preventDefault();
            $(this).addClass("click").siblings().removeClass("click");
        });

        $(".view-all-ans").click(function() {
            var evt = window.event || arguments.callee.caller.arguments[0];
            evt.preventDefault();
            if($(this).hasClass("none-ans")) {
                return
            }
            $(this).parent().parent().parent().find(".hid-ans").slideDown();
        })
        /*  mouse leave */
        $(".source-key-box a ").mouseleave(function(){
            $(this).removeClass("click");
        });

        $(".ans-btn").click(function(){
            $(this).siblings().remove();
            $(this).fadeOut();
            $(this).parent().next().show().slideDown();
            $(this).parent().parent().parent().show().find(".hid-ans").slideDown();
            $(this).parent().parent().find(".hid-form .form-control").fadeIn();
            $(this).parent().parent().find(".text-right").fadeIn();
        });

        $(".cancel-ans").click(function(){
            $(this).parent().fadeOut();  /*隐藏div.text-right*/
            $(this).parent().parent().find('.form-control').fadeOut(); /*隐藏表单*/
            console.log( $(this).parent().parent().parent());
            $(this).parent().parent().parent().find(".hid-head .ans-btn").fadeIn();/* 显示头部 */
            $(this).parent().parent().parent().find(".hid-form").fadeOut();
        });


        $(".v-cover-icon").click(function () {
            $(this).parent().hide();
            $(".prog-bar-point").removeClass("video-start-point");
            video.play();
            controlBind();
        });
        function controlBind() {
            $(".video-control-wrap").fadeIn();
            $(".source-box").hover(function() {
                $(".video-control-wrap").fadeIn();
            }, function () {
                $(".video-control-wrap").fadeOut();
            });
        }

       $(".share-btn").hover(function() {
            $(this).addClass("share-clicked");
            $(".share-list").show();
        });
        $(".share-list").mouseleave(function(){
            $(this).hide();
            $(".share-btn").removeClass("share-clicked");
        });


    });

</script>

</body>
</html>